// 用户信息列表
<template>
  <div>
    <!--<div class="user-filter-container">-->
      <!--<el-tag type="warning">{{userTage}}</el-tag>-->
      <!--<span class="search-label">模式:</span>-->
      <!--<el-select @change='handleFilter' size="small" clearable style="width: 100px" class="filter-item" v-model="params.reset_mode" placeholder="模式">-->
        <!--<el-option v-for="item in [{label:'现金',value:1},{label:'信用',value:2}]" :key="item.label" :label="item.label" :value="item.value">-->
        <!--</el-option>-->
      <!--</el-select>-->
      <!--<span class="search-label">状态:</span>-->
      <!--<el-select @change='handleFilter' size="small" clearable class="filter-item" style="width: 100px" v-model="params.status" placeholder="状态">-->
        <!--<el-option v-for="item in  [{label:'正常',value:1},{label:'冻结',value:2},{label:'停用',value:3}]" :key="item.label" :label="item.label" :value="item.value">-->
        <!--</el-option>-->
      <!--</el-select>-->
      <!--<span class="search-label">账号或名称:</span>-->
      <!--<el-input @change="handleFilter" size="small" clearable style="width:200px;" class="filter-item" v-model="params.name" placeholder="账号或昵称">-->
      <!--</el-input>-->
      <!--<el-button class="filter-item" size="small" type="primary" @click="handleFilter" icon="el-icon-search">查找</el-button>-->
      <!--<el-button class="filter-item" size="small" type="primary" @click="handleCreateAgent" icon="el-icon-circle-plus-outline" plain>新增{{plv/1+1}}级代理</el-button>-->
      <!--<el-button class="filter-item" size="small" type="primary" @click="handleCreateMember" icon="el-icon-circle-plus-outline" plain>新增{{plv/1+1}}级会员</el-button>-->
    <!--</div>-->

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>{{userTage}}</span>
      </ul>
      <ul class="bread-nav-content">
      <span class="search-label">模式:</span>
      <el-select @change='handleFilter' size="small" clearable style="width: 100px" class="filter-item" v-model="params.reset_mode" placeholder="模式">
        <el-option v-for="item in [{label:'现金',value:1},{label:'信用',value:2}]" :key="item.label" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <span class="search-label">状态:</span>
      <el-select @change='handleFilter' size="small" clearable class="filter-item" style="width: 100px" v-model="params.status" placeholder="状态">
        <el-option v-for="item in  [{label:'正常',value:1},{label:'冻结',value:2},{label:'停用',value:3}]" :key="item.label" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <span class="search-label">账号或名称:</span>
      <el-input @change="handleFilter" size="small" clearable style="width:200px;" class="filter-item" v-model="params.name" placeholder="账号或昵称">
      </el-input>
      <el-button class="filter-item" size="small" type="primary" @click="handleFilter" icon="el-icon-search">查找</el-button>
      <el-button class="filter-item" size="small" type="primary" @click="handleCreateAgent" icon="el-icon-circle-plus-outline" plain>新增{{plv/1+1}}级代理</el-button>
      <el-button class="filter-item" size="small" type="primary" @click="handleCreateMember" icon="el-icon-circle-plus-outline" plain>新增{{plv/1+1}}级会员</el-button>
      </ul>
      <ul class="bread-nav-content-right">
        <a class="back" @click="history.back()">返回</a>
      </ul>
    </el-row>

    <el-row :gutter="10" class="content">
      <el-col :span="2">
        <div class="level-menu">
          <el-tag type="primary" size="small" style="width:100%">下线</el-tag>
          <el-menu router>
            <!-- checkParams时,params.lv 已经加了1,所以传参数时要对应减1 -->
            <el-menu-item :index="`/user/list/1/${params.parent}/${plv}/direct`" style="padding:0">
              <span class="level-menu-left">直属代理</span>
              <span class="level-menu-right">{{subCount.direct_sub_agent_count}}</span>
            </el-menu-item>
            <el-menu-item :index="`/user/list/2/${params.parent}/${plv}/direct`" style="padding:0">
              <span class="level-menu-left">直属会员</span>
              <span class="level-menu-right">{{subCount.direct_sub_member_count}}</span>
            </el-menu-item>
            <el-menu-item :index="`/user/list/1/${params.parent}/${plv}/all`" style="padding:0">
              <span class="level-menu-left">全部代理</span>
              <span class="level-menu-right">{{subCount.all_sub_agent_count}}</span>
            </el-menu-item>
            <el-menu-item v-for="(item,index) in subCount.agent_details" :key="item.uids" :index="`/user/list/1/${params.parent}/${plv}/${index}`" style="padding:0">
              <span class="level-menu-left">{{index}}级代理</span>
              <span class="level-menu-right">{{item.count}}</span>
            </el-menu-item>
            <el-menu-item :index="`/user/list/2/${params.parent}/${plv}/all`" style="padding:0">
              <span class="level-menu-left">全部会员</span>
              <span class="level-menu-right">{{subCount.all_sub_member_count}}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="22">
        <el-table :data="list" v-loading="loading" key="userTable" element-loading-text="加载中"
                  size="" border fit header-cell-class-name='tableHeader' style="min-width:100%"
                  :row-class-name="tableRowClassName" cell-class-name="tableCellClassName">
          <el-table-column type="index" label="#" align="center" min-width="35">
          </el-table-column>
          <!-- <el-table-column prop="" label="在线" align="center" min-width="50">
          </el-table-column> -->
          <el-table-column prop="upperLevelAgent.username" label="上级账号" align="center" min-width="120">
            <template slot-scope="scope">
              <el-tooltip content="查看直属代理和会员" placement="top">
                <router-link class="link" :to="`/user/list/all/${scope.row.upperLevelAgent.username}/${scope.row.upperLevelAgent.level}/direct`">{{scope.row.upperLevelAgent.username}}</router-link>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="" label="用户类型" align="center" min-width="90">
            <template slot-scope="scope">
              <el-row> {{userMap.reset_mode[scope.row.reset_mode]}} </el-row>
              <el-row> {{scope.row.level}}级{{userMap.type[scope.row.type]}} </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="" label="账号" align="center" min-width="200">
            <template slot-scope="scope">
              <!-- 当拥有直属代理或直属会员时可点击 -->
              <el-tooltip v-if="(scope.row.count.direct_sub_agent_count+scope.row.count.direct_sub_member_count)>0 && scope.row.type === 1" content="查看直属代理和会员" placement="top">
                <router-link class="link" :to="`/user/list/all/${scope.row.username}/${scope.row.level}/direct`">{{scope.row.username}}</router-link>
              </el-tooltip>
              <span v-else>{{scope.row.username}}</span>
              [{{scope.row.nickname}}]
            </template>
          </el-table-column>
          <el-table-column prop="qk_cash_amount" label="快开彩额度" align="right" min-width="100">
            <template slot-scope="scope">
              <el-tooltip placement="bottom-start" effect="light">
                <div slot="content">
                  <el-form status-icon size="mini" label-position="right" label-width="100px" style="width:300px">
                    <el-tag style="width:100%;margin-bottom:5px;">额度修改: 账号 {{scope.row.username}}</el-tag>
                    <el-form-item label="快开彩额度">
                      {{scope.row.qk_cash_amount}}
                      <el-button v-show="scope.row.qk_cash_amount/1>0" style="margin-left:10px;" @click="handleWithdrawAll">提取全部额度</el-button>
                    </el-form-item>
                    <el-form-item label="上级可用额度"> {{scope.row.upperLevelAgent.qk_cash_amount}} </el-form-item>
                    <el-form-item prop="oper_type" label="类型">
                      <el-radio-group v-model="amountForm.oper_type" @change="handleAmountOperTypeChange">
                        <el-radio label="1">存款</el-radio>
                        <el-radio label="2">提款</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="amount" label="金额">
                      <!-- 存款额度max=上级余额   提款额度max=自身余额 -->
                      <el-input-number v-model="amountForm.amount" :min=0 :max="amountForm.max"></el-input-number>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="amountChangeSubmit">确定</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <span class="link" @mouseover="resetAmountForm(1,scope.row)">{{scope.row.qk_cash_amount}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="hk_cash_amount" label="香港彩额度" align="right" min-width="100">
            <template slot-scope="scope">
              <el-tooltip placement="bottom-start" effect="light">
                <div slot="content">
                  <el-form status-icon size="mini" label-position="right" label-width="100px" style="width:300px">
                    <el-tag style="width:100%;margin-bottom:5px;">额度修改: 账号 {{scope.row.username}}</el-tag>
                    <el-form-item label="香港彩额度">
                      {{scope.row.hk_cash_amount}}
                      <el-button v-show="scope.row.hk_cash_amount/1>0" style="margin-left:10px;" @click="handleWithdrawAll">提取全部额度</el-button>
                    </el-form-item>
                    <el-form-item label="上级可用额度"> {{scope.row.upperLevelAgent.hk_cash_amount}} </el-form-item>
                    <el-form-item prop="oper_type" label="类型">
                      <el-radio-group v-model="amountForm.oper_type" @change="handleAmountOperTypeChange">
                        <el-radio label="1">存款</el-radio>
                        <el-radio label="2">提款</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="amount" label="金额">
                      <!-- 存款额度max=上级余额   提款额度max=自身余额 -->
                      <el-input-number v-model="amountForm.amount" :min=0 :max="amountForm.max"></el-input-number>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="amountChangeSubmit">确定</el-button>
                    </el-form-item>
                  </el-form>
                </div>
                <span class="link" @mouseover="resetAmountForm(2,scope.row)">{{scope.row.hk_cash_amount}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="" label="占成" align="center" min-width="50">
            <template slot-scope="scope">
              <el-tooltip placement="bottom-start" effect="light">
                <div slot="content">
                  <el-table :data="parentShare" size="mini" header-cell-class-name='tableHeader'>
                    <!-- <el-table-column width="50" property="uid" label="uid"></el-table-column> -->
                    <el-table-column width="120" property="agent_level" label="模式"></el-table-column>
                    <el-table-column width="110" property="username" label="账号"></el-table-column>
                    <el-table-column width="60" property="level" label="等级"></el-table-column>
                    <el-table-column width="80" property="qk_shares" label="快开彩">
                      <template slot-scope="scope">
                        {{parseInt(scope.row.qk_shares)}}%
                      </template>
                    </el-table-column>
                    <el-table-column width="80" property="qk_shares" label="香港彩">
                      <template slot-scope="scope">
                        {{parseInt(scope.row.hk_shares)}}%
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <span class="link" @mouseover="handleParentShare(scope.$index, scope.row)">明细</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="handicaps" v-if="true" key="handicaps" :formatter="formatHandicaps" label="盘口" align="center" min-width="60">
          </el-table-column>
          <el-table-column prop="" v-if="params.type !== 2" label="下线" align="center" min-width="50">
            <template slot-scope="scope" v-if="parseInt(scope.row.type) === 1">
              <el-tooltip v-if="scope.row.count.direct_sub_agent_count>0" content="直属代理" placement="top">
                <router-link class="link" :to="`/user/list/1/${scope.row.username}/${scope.row.level}/direct`">{{scope.row.count.direct_sub_agent_count}}</router-link>
              </el-tooltip>
              <span v-else>{{scope.row.count.direct_sub_member_count}}</span>
              <el-tooltip v-if="scope.row.count.direct_sub_member_count>0" content="直属会员" placement="top">
                <router-link class="link" :to="`/user/list/2/${scope.row.username}/${scope.row.level}/direct`">({{scope.row.count.direct_sub_member_count}})</router-link>
              </el-tooltip>
              <span v-else>({{scope.row.count.direct_sub_member_count}})</span>
            </template>
          </el-table-column>
          <el-table-column prop="" v-if="params.type !== 2" label="代理" align="center" min-width="50">
            <template slot-scope="scope"  v-if="parseInt(scope.row.type) === 1">
              <el-tooltip v-if="scope.row.count.all_sub_agent_count>0" content="全部代理" placement="top">
                <router-link class="link" :to="`/user/list/1/${scope.row.username}/${scope.row.level}/all`">{{scope.row.count.all_sub_agent_count}}</router-link>
              </el-tooltip>
              <span v-else>{{scope.row.count.all_sub_agent_count}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" v-if="params.type !== 2" label="会员" align="center" min-width="50">
            <template slot-scope="scope" v-if="parseInt(scope.row.type) === 1">
              <el-tooltip v-if="scope.row.count.all_sub_member_count>0" content="全部会员" placement="top">
                <router-link class="link" :to="`/user/list/2/${scope.row.username}/${scope.row.level}/all`">{{scope.row.count.all_sub_member_count}}</router-link>
              </el-tooltip>
              <span v-else>{{scope.row.count.all_sub_member_count}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" v-if="params.type !== 2" key="addNewUser" label="新增" align="center" min-width="50">
            <template slot-scope="scope" v-if="parseInt(scope.row.type) === 1">
              <el-row>
                <el-tooltip :content="`新增${scope.row.level/1+1}级代理`" placement="right">
                  <router-link class="link" :to="`/user/set/1/${scope.row.username}/add`">代理</router-link>
                </el-tooltip>
              </el-row>
              <el-row>
                <el-tooltip :content="`新增${scope.row.level/1+1}级会员`" placement="right">
                  <router-link class="link" :to="`/user/set/2/${scope.row.username}/add`">会员</router-link>
                </el-tooltip>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column prop="created_date" label="新增日期" align="center" min-width="100">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center" min-width="50">
            <template slot-scope="scope">
              <el-tooltip placement="right" effect="light">
                <div slot="content">
                  <el-radio-group @change="handleCellStatusChange(scope.$index,scope.row)" v-model="scope.row.status" size="small">
                    <el-radio-button v-for="(item,index) in userMap.status" :key="item" :label="index">{{item}}</el-radio-button>
                  </el-radio-group>
                </div>
                <span class="link">{{userMap.status[scope.row.status]}}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="" label="功能" align="center" min-width="200">
            <template slot-scope="scope">
              <span size="mini" class="link opera-link" @click="handleEdit(scope.$index, scope.row)">修改</span>
              <span size="mini" class="link opera-link" @click="handleCommission(scope.$index, scope.row)">退水</span>
              <span size="mini" class="link opera-link" @click="handleLog(scope.$index, scope.row)">日志</span>
              <span size="mini" class="link opera-link" @click="handleRecord(scope.$index, scope.row)">记录</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container" v-show="pagination.totalCount > 0">
          <el-pagination @size-change="handlePageSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10,20,30,50]" :page-size="params.perpage" :total="pagination.totalCount" layout="total,sizes,prev,pager,next,jumper" background>
          </el-pagination>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { user as userMap } from '@/utils/map' // 参数映射

export default {
  data() {
    return {
      plv: null, // 父级等级
      userTage: null, // 用户标签
      userMap: userMap, // 用户字段映射
      parentShare: null, // 用户父级占成列表
      // 查詢參數
      params: {
        lv: null, // int 代理等级
        type: null, // enum(1,2)1代理,2会员,null表示2种都查询
        parent: null, // string 上级名称
        reset_mode: null, // enum(1,2) 1现金,2信用
        name: null, // string(25) 账号名称或者昵称
        status: null, // enum(1,2,3) 代理状态:1启动,2冻结,3停用
        perpage: 10, // 每页数量
      },
      // 额度修改表单
      amountForm: {
        username: null,
        amount: null, // 变更额度
        lottery_type: null, // 彩种 1:快开,2:香港
        oper_type: '1', // 操作类型 1:存入,2:提取
        parentAmount: null, // 父级额度
        selfAmount: null, // 自身额度
        max: null, // 最大额度
      },
      amountFormRules: {
        oper_type: [
          {
            required: true,
            trigger: 'blur',
            message: '请选择类型',
          },
        ],
        amount: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入金额',
          },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value / 1 <= 0) {
                callback(new Error('金额要大于0'))
              } else {
                callback()
              }
            },
          },
        ],
      },
      // 分页信息
      pagination: {
        currentPage: 1,
        totalCount: 0,
        defaultPageSize: 2,
      },
      list: null, // 列表数据
      loading: true,
      subCount: {}, // 下级数量统计列表
    }
  },
  // 数据格式化
  filters: {
    filterHandicaps() {},
    // 根据操作,返回修改额度的最大值
  },
  computed: {
    ...mapGetters(['info']),
  },
  created() {
    // 验证参数
    console.log('验证参数的参数', this.$route)
    this.checkParams(this.$route.params)
    // 拉取数据
    this.fetchData()
  },
  methods: {
    // 根据传入的参数,转换post的参数
    // 路由传入3个参数,type,parent,lv
    checkParams(params) {
      // console.log(params);
      // 用户
      console.log('验证参数', params)
      if (params.parent === 'my') {
        // this.params.parent = this.info.username
        // this.userTage = this.info.username
      //  暂时
        this.params.parent = 'admin'
        this.userTage = 'admin'
      } else {
        this.params.parent = params.parent
        this.userTage = params.parent
      }
      this.fetchSubCount(this.params.parent)

      // 父级等级
      if (params.plv === 'my') {
        this.plv = this.info.level
      } else {
        this.plv = params.plv
      }

      // 下级等级
      if (params.lv === 'direct') {
        this.params.lv = parseInt(this.plv, 10) + 1 // 当前用户的lv的下级
        this.userTage += ` -> 直属${this.params.lv}级`
      } else if (params.lv === 'all') {
        this.params.lv = null
        this.userTage += ` -> 全部`
      } else if (parseInt(params.lv, 10) >= 0) {
        this.params.lv = parseInt(params.lv, 10) // 指定用户的下级
        this.userTage += ` -> ${this.params.lv}级`
      }

      // 类型
      if (parseInt(params.type) === 1) {
        this.params.type = params.type
        this.userTage += '代理'
      } else if (parseInt(params.type) === 2) {
        this.params.type = params.type
        this.userTage += '会员'
      } else {
        this.params.type = null // 全部
        this.userTage += `代理和会员`
      }
    },

    // 获取数据
    fetchData() {
      this.loading = true
      console.log('获取数据', this.params)
      this.$store
        .dispatch('ListAgent', {
          params: this.params,
          pagination: this.pagination,
        })
        .then(response => {
          console.log('123456789000', response)
          this.loading = false
          this.list = response.list
          if (response.data) {
            this.pagination.totalCount = parseInt(
              response.pagination.totalCount,
              10,
            )
            this.pagination.defaultPageSize = parseInt(
              response.pagination.defaultPageSize,
              10,
            )
          }
        })
    },

    // 当前页变化
    handleCurrentChange(value) {
      this.pagination.currentPage = value
      this.fetchData()
    },

    // 每页显示数量变化
    handlePageSizeChange(value) {
      this.params.perpage = value
      this.fetchData()
    },

    handleCreateAgent() {
      // 新增代理
      this.$router.push(`/user/set/1/${this.params.parent}/add`)
    },
    handleCreateMember() {
      // 新增会员
      this.$router.push(`/user/set/2/${this.params.parent}/add`)
    },
    handleEdit(index, row) {
      this.$router.push(
        `/user/set/${row.type}/${row.upperLevelAgent.username}/edit/${
          row.username
        }`
      )
      // 修改会员
    },
    handleCommission(index, row) {
      // 退水设置
      this.$router.push(`/profile/commission/${row.username}`)
    },
    handleLog(index, row) {
      // 日志
      this.$router.push(`/profile/loginlog/${row.username}`)
    },
    handleRecord(index, row) {
      // 记录
      this.$router.push(`/user/record/${row.username}`)
    },
    handleFilter() {
      // 搜索
      this.fetchData()
    },

    // 下级数量列表
    fetchSubCount(agentname) {
      this.$store
        .dispatch('SubCount', {
          agentname: agentname,
        })
        .then(response => {
          console.log('下级数量列表', response)
          this.subCount = response
        })
    },
    formatHandicaps(row, column) {
      return row.handicaps.split(',').map(val => {
        return userMap.handicaps[val]
      })
    },
    // 清空amountFormd的数据
    resetAmountForm(lottery_type, row) {
      switch (lottery_type) {
        case 1:
          // 快开
          this.amountForm.selfAmount = parseInt(row.qk_lottery_amount) // 自身额度
          this.amountForm.parentAmount = parseInt(
            row.upperLevelAgent.qk_lottery_amount // 上级额度
          )
          break
        case 2:
          // 香港
          this.amountForm.selfAmount = parseInt(row.hk_lottery_amount) // 自身额度
          this.amountForm.parentAmount = parseInt(
            row.upperLevelAgent.hk_lottery_amount // 上级额度
          )
          break
        default:
          break
      }
      // 赋值给form
      this.amountForm.lottery_type = lottery_type
      this.amountForm.username = row.username
      this.handleAmountOperTypeChange()
    },
    // 处理额度操作类型的变化
    handleAmountOperTypeChange() {
      if (this.amountForm.oper_type === 1) {
        // 存入 增加自身额度
        this.amountForm.max = this.amountForm.parentAmount
      } else {
        // 提取 减少自身额度
        this.amountForm.max = this.amountForm.selfAmount
      }
      // 修改amount
      if (this.amountForm.amount > this.amountForm.max) {
        this.amountForm.amount = this.amountForm.max
      }
    },
    // 提交额度变更
    amountChangeSubmit() {
      // console.log(this.amountForm);
      // 验证额度
      if (this.amountForm.amount <= 0) {
        this.$message({
          message: '额度要大于0',
          type: 'error',
        })
        return false
      }
      console.log('提交额度变更', this.amountForm)
      // 发送请求
      this.$store
        .dispatch('ValidateChangeAmount', {
          ChangeAmountForm: this.amountForm,
        })
        .then(response => {
          if (response.length === 0) {
            // 验证通过
            this.$store
              .dispatch('ChangeAmount', {
                ChangeAmountForm: this.amountForm,
              })
              .then(res => {
                if (res === true) {
                  // 修改成功
                  this.$message({
                    message: `${this.amountForm.username}已${
                      this.amountForm.oper_type === 1 ? '存款' : '提款'
                    }${
                      this.amountForm.lottery_type === 1 ? '快开彩' : '香港彩'
                    }额度${this.amountForm.amount}元!`,
                    type: 'success',
                  })
                  // 重新拉取表格
                  this.fetchData()
                } else {
                  // 修改失败
                  this.$message({
                    message: Object.values(res)[0].toString(),
                    type: 'error',
                  })
                }
              })
          } else {
            // 服务端验证失败
            this.$message({
              message: Object.values(response)[0].toString(),
              type: 'error',
            })
          }
        })
    },
    // 处理全部提款
    handleWithdrawAll() {
      this.$store
        .dispatch('WithdrawAll', {
          username: this.amountForm.username,
          l_type: this.amountForm.lottery_type, // 1:快开,2:香港
        })
        .then(response => {
          if (response === true) {
            this.$message({
              message: `${this.amountForm.username}${
                this.amountForm.lottery_type === 1 ? '快开彩' : '香港彩'
              }额度已全部提取`,
              type: 'success',
            })
            // 重新拉取数据
            this.fetchData()
          } else {
            this.$message({
              message: `${this.amountForm.username}额度提取失败`,
              type: 'error',
            })
          }
        })
    },
    // 处理单元格的用户状态变化
    handleCellStatusChange(index, row) {
      this.$store
        .dispatch('ChangeStatus', {
          username: row.username,
          status: row.status,
        })
        .then(response => {
          if (response === true) {
            this.$message({
              message: `${row.username}状态修改成功`,
              type: 'success',
            })
          } else {
            this.$message({
              message: `${row.username}状态修改失败`,
              type: 'error',
            })
            // 修改失败重新拉取数据
            this.fetchData()
          }
        })
    },
    // 从服务器获取用户的父级占成明细
    handleParentShare(index, row) {
      this.$store
        .dispatch('ParentShare', {
          username: row.username,
        })
        .then(response => {
          console.log('------------------', response)
          const newData = []
          for (const key in response) {
            if (key !== 'data') {
              newData.push(response[key])
            }
          }
          this.parentShare = newData.reverse() // 反转顺序
        })
    },
    // 为每一行添加样式
    tableRowClassName({ row, rowIndex }) {
      if (row.status === 2) {
        return 'warning-row'
      } else if (row.status === 3) {
        return 'error-row'
      }
      return ''
    },
  },
  watch: {
    $route(to, from) {
      // 监控路由变化,从新加载数据
      if (to.params !== from.params) {
        this.checkParams(to.params)
        if (this.pagination.currentPage !== 1) {
          this.pagination.currentPage = 1 // 默认查询第一页,当前页变化,会触发数据拉取
        } else {
          this.fetchData()
        }
      }
    },
  },
}
</script>
<style>
.user-table-container {
  width: 100%;
  display: inline-block;
}
.user-filter-container .filter-item {
  margin-right: 12px;
  margin-bottom: 15px;
}

.user-filter-container .search-label {
  font-size: 12px;
}

.tableHeader{
  box-shadow: inset 0px -14px 19px 2px #CAE8F6;
  height: 25px;
  text-align: center;
  color: #131950;
  font-weight: bold;
  line-height: 25px;
  font-size:14px;
  padding: 0 !important;
  margin: 0;
}
.tableCellClassName{
  height: 25px;
  text-align: center;
  color: #131950;
  line-height: 25px;
  font-size:14px;
  padding: 0;
  /*border: 1px solid #B9C2CB;*/
}

.level-menu {
  text-align: center;
  font-size: 12px;
}

.level-menu .el-menu {
  border: solid 1px #b9c2cb;
  border-top: none;
  border-radius: 3%;
}
.level-menu .el-menu-item {
  height: 30px;
  line-height: 30px;
  color: blue;
}
.table-user-list {
}
.table-user-list .el-table .warning-row {
  background: oldlace;
}

.table-user-list .el-table .error-row {
  background: rgb(241, 216, 220);
}
.opera-link {
  margin: 0 5px;
}


.content{
  padding: 10px;
}

.bread-nav{
  height:30px;
  font-size: 13px;
  line-height: 30px;
  background: #ECEFF2;
  border-bottom: 1px solid #d0dff2;
  padding: 0 0 0 10px;
  overflow: hidden;
}
.bread-nav-title{
  color:#386399;
  font-weight: bold;
  float: left;
  background: url("../../../../static/agent/img/tb.png") no-repeat left center;
  padding-left: 20px;
}
.bread-nav-content{
  padding-left: 20px;
  float: left;
}
.bread-nav-content select{
  height:20px;
  line-height: 20px;
  margin-top: 5px;
}
.bread-nav-content-right{
  float: right;
}
.bread-nav-content-right .back{
  border:0;
  background:url(/static/agent/img/ico_back.png) no-repeat left 8px;
  color:#386399;
  display: block;
  font-weight: bold;
  margin-right: 10px;
  padding: 0 0 0 20px;
}
.bread-nav-content-right .back:hover{
  text-decoration: underline;
}
  .level-menu-left{
    display: inline-block;
    float: left;
    padding-left: 10px;
  }
.level-menu-right{
  display: inline-block;
  float: right;
  padding-right: 10px;
}
</style>
<style>
  .bread-nav-content .el-input__inner{
    height:25px;
    line-height: 25px;
  }
  .bread-nav-content .el-button{
    padding: 4px 10px;
  }
  .level-menu .el-tag{
    box-shadow: inset 0px -10px 10px 2px #CAE8F6;
    border-radius: 0;
    border: 1px solid #b9c2cb;
    background-color: rgba(0,0,0,0);
    height: 24px;
    line-height: 24px;
    font-weight: bold;
    font-size: 13px;
    color:#344B54
  }
</style>
